<template>
	<div class="main_content_1">
		<ul class="staTabName">
			<li @click="$router.push('/SchoolManagement')" style="margin-left: 0rem;">人员管理</li>
			<li @click="$router.push('/ProfessionalManagement')" class="active">专业管理</li>
			<li @click="$router.push('/CollegeManagement')">学院管理</li>

		</ul>
		<div class="operation">
			<div class="middle">
				<div style="display: flex;">
					选择学院：
					<el-select v-model="collegeId" placeholder="学院" @change="selectionChange()">
						<el-option v-for="item in SelectCollegeList" :key="item.collegeId" :label="item.collegeName" :value="item.collegeId">
						</el-option>
					</el-select>


				</div>
				<div class="dataSearch" style="display: flex;">
					<div class="header1">
						<div style="margin-right: 4.5rem">
							<button @click="centerDialogVisiblet=true">添加专业</button>
						</div>
					</div>
				</div>
			</div>
			<el-table ref="multipleTable" :data="SelectMajorList" tooltip-effect="dark" style="width: 100%;overflow: auto;height: 28.75rem;margin-top: 1.25rem;"
			 @selection-change="handleSelectionChange" :header-cell-style="{'background-color': '#f2f4f7'}" :cell-style="{padding:'20px 0'}">
				<el-table-column label="专业名">
					<template slot-scope="scope">{{ scope.row.majorName }}</template>
				</el-table-column>

				<el-table-column label="操作" show-overflow-tooltip width="200">
					<template slot-scope="scope">
						<el-button style="background-color:#03d3bd;color: white;" size="mini" @click="Delete(scope.row.majorId)">删除</el-button>
						<el-button style="background-color: #ffab03;color: white;" 　size="mini" @click="EditmajorName(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<el-dialog title="添加专业" :visible.sync="centerDialogVisiblet" width="30%" center>
			<el-select v-model="college" placeholder="学院" @change="selectionChange()">
				<el-option v-for="item in SelectCollegeList" :key="item.collegeId" :label="item.collegeName" :value="item.collegeId">
				</el-option>
			</el-select>
			<div style="display: flex;" v-for="(Intem,index) in majorNameList">
				<el-input v-model="Intem.name" placeholder="专业名"></el-input>
				<el-button icon="el-icon-delete" style="height: 40px;margin-top: 1.25rem;" @click="Delete(index)">删除</el-button>
			</div>
			<span slot="footer" class="dialog-footer">


				<el-button @click="Cansole()">取 消</el-button>
				<el-button type="info" @click="addProfessional()">添加</el-button>
				<el-button type="primary" @click="insertMajor()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑" :visible.sync="centerDialogVisible" width="30%" center>
			<el-input v-model="majorName" placeholder="编辑"></el-input>
			<span slot="footer" class="dialog-footer">

				<el-button @click="centerDialogVisible = false">取 消</el-button>

				<el-button type="primary" @click="changeMajorName()">确 定</el-button>
			</span>
		</el-dialog>

	</div>

</template>

<script>
	import {
		HttpManager
	} from '../../../../request/Teacher.js'
	export default {
		data() {
			return {
				options: [{
					label: "老师",
					value: 1

				}, {
					label: "学生",
					value: 2
				}],
				value: '',
				options1: [{
					label: "已注册",
					value: 1

				}, {
					label: "未注册",
					value: 2
				}],
				college: '',
				multipleSelection: [],
				active: false,
				centerDialogVisible: false,
				centerDialogVisiblet: false,
				school: 1,
				SelectMajorList: [],
				SelectCollegeList: [],
				collegeId: '',
				college: '',
				majorNameList: [{
					name: ''
				}],
				majorName: '',
				majorId: ""
			}
		},
		created() {
			this.InitselectSchool();
			this.SelectCollegeListBySchoolId();
		},
		methods: {
			//添加专业列表
			addProfessional() {
				this.majorNameList.push({
					name: ''
				});
			},
			//删除专业列表
			Delete(ers) {
				var parmas = {
					majorId: ers
				}
				HttpManager.deleteMajor(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.selectionChange();
				})

			},
			//关闭窗口
			Cansole() {
				this.centerDialogVisiblet = false;
				this.majorNameList = [{
					name: ""
				}];
			},
			//获取学校id
			InitselectSchool() {
				HttpManager.InitselectSchool().then(e => {
					console.log(e.data.data.schoolId);
					this.school = e.data.data.schoolId;

				})
			},
			//获取学院信息
			SelectCollegeListBySchoolId() {
				var parmas = {
					schoolId: this.school
				}
				HttpManager.SelectCollegeListBySchoolId(parmas).then(e => {
					console.log(e.data.data);
					this.SelectCollegeList = e.data.data;
					this.collegeId = this.SelectCollegeList[0].collegeId;
					this.selectionChange();
				})
			},
			//获取专业列表
			selectionChange() {
				var parmas = {
					collegeId: this.collegeId
				}
				HttpManager.SelectMajorListByCollegeId(parmas).then(e => {
					console.log(e.data.data);
					this.SelectMajorList = e.data.data;
				})
			},
			//编辑专业名字
			EditmajorName(rows) {
				this.centerDialogVisible = true;
				this.majorName = rows.majorName;
				this.majorId = rows.majorId
			},
			input() {

			},
			handleSelectionChange() {

			},
			//后台添加专业list
			insertMajor() {
				this.centerDialogVisiblet = false;
				var majorNameList = [];
				for (let i = 0; i < this.majorNameList.length; i++) {
					majorNameList.push(this.majorNameList[i].name);
				}

				var parmas = {
					collegeId: this.collegeId,
					majorNameList: majorNameList.join(',')
				}
				HttpManager.insertMajor(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.selectionChange();
				})
			},
			changeMajorName() {
				this.centerDialogVisible = false;
				var parmas = {
					majorId: this.collegeId,
					majorName: this.majorName
				}
				HttpManager.changeMajorName(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.selectionChange();
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main_content_1 {
		margin-left: 20px;
		margin-right: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;
		margin-right: 1.25rem;


		// 搜索框
		.dataSearch {
			display: flex;
			width: 300px;
			height: 36px;
			line-height: 36px;
			color: #cecece;


			&>.el-dropdown>div {
				cursor: pointer;
			}

			&>.el-dropdown>div:hover {
				color: #00B8A6 !important;
			}



		}

	}

	.staTabName {
		display: flex;
		list-style: none;
		cursor: pointer;
	}

	.staTabName li {
		margin-left: 2.25rem;
	}


	.el-dropdown {
		height: 36px;
		line-height: 36px;
	}


	.header1 button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 20px;
		cursor: pointer;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.middle {
		/* border: 1px solid; */
		height: 40px;
		font-size: 0.875rem;
		margin-top: 10px;
		margin-bottom: 0.625rem;
		display: flex;
		justify-content: space-between;
	}


	.operation {
		width: 100%;
		height: 100%;
		margin-top: 1.25rem;
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	.el-select {
		width: 200px;
	}

	.el-input,
	.el-dialog .el-select {
		margin-top: 1.25rem;
	}

	.el-dialog .el-select {
		width: 100%;
	}

	.staTabName {
		margin-top: 1.25rem;
		height: 60px;
		line-height: 60px;
		// padding-left: 20px;
	}

	.active {
		color: #03d3bd;
		font-weight: 600;
		position: relative;
	}
</style>
